<template>
  <div class="device-edit">
    <h3>设备详情</h3>
    <div>
      <p class="device-id">
        <span>设备编号：</span>
        <span>{{device.id}}</span>
      </p>
      <p class="device-name">
        <span>设备名称：</span>
        <el-input v-model="device.name" :value="device.name"></el-input>
      </p>
      <p class="device-status">
        <span>设备状态：</span>
        <el-select v-model="device.status" :value="device.status">
          <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
        </el-select>
      </p>
      <p class="device-category">
        <span>设备分类：</span>
        <el-select v-model="device.category" :value="device.category">
          <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </p>
      <p class="device-number">
        <span>数量：</span>
        <el-input v-model="device.number" :value="device.number"></el-input>
      </p>
      <p class="device-price">
        <span>单价：</span>
        <el-input v-model="device.price" :value="device.price"></el-input>
      </p>
      <p class="device-date">
        <span>购置日期：</span>
        <el-input v-model="device.time" :value="device.time"></el-input>
      </p>
      <p>
        <el-button type="success" @click="updateDeviceInfo">保存</el-button>
        <el-button plain @click="backDefault">返回列表</el-button>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "DeviceEdit",
  data() {
    return {
      device: {},
      category:[],
     
      status:[
        {
          value: "STATUS1",
          label: "未审核"
        }, 
        {
          value: "STATUS2",
          label: "已审核"
        }
      ],
    }
  },
  methods: {
    updateDeviceInfo() {
      this.$axios({
        method: 'post',
        url: '/pre-edit',
        data: {
          ...this.device
        }
      }).then(res => {
        if(res.data.code == 0) {
          this.$message({
                message: '修改成功',
                type: 'success'
          });
          this.$store.commit('changeDefault', true)
          this.$router.push('/home/register')
        }
      })
    },
     backDefault() {
      this.$store.commit('changeDefault',true)
      this.$router.push('/home/register')
    }
  },
  created() {
    this.device = JSON.parse(this.$route.query.obj)
    this.$axios({
      method: "get",
      url: '/category-list'
    }).then(res => {
      this.category = res.data.data
    })
  }
}
</script>

<style lang="less" scoped>
    .device-id {
    height: 60px;
    font-size: 20px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
  }
  p {
    line-height: 30px;
    display: flex;
    margin: 10px 0;
    span {
      
        width: 100px;
        text-align: right;
     
        margin-right: 20px;
      
    }
    .el-input {
      width: 300px;
    }
  }
</style>